$(function () {
//    立即执行函数
    console.log('开始进行界面渲染')

//    加载数据
    function loadData() {
        var collection = localStorage.getItem('todo');
        if (collection) {
            //返回列表数据
            return JSON.parse(collection);
        } else {
            return []
        }
    }

    //保存数据
    function saveData(data) {
        localStorage.setItem('todo', JSON.stringify(data))
    }

    //渲染界面
    function load() {
        var todoCount = 0;
        var doneCount = 0;
        var todoStr = '';
        var doneStr = '';
        var todoList = loadData();
        if (todoList && todoList.length > 0) {
            todoList.forEach(function (data, i) {

                    if (data.done) {
                        //选择框 文本  删除
                        //javascript:; 可以使点击a标签不进行跳转
                        doneStr += `
                        <li>
                            <input type="checkbox" index = ${i} checked = 'checked'>
                            <p id="p-${i}" index=${i}>${data.title}</p>
                            <a href="javascript:;">-</a>
                        </li>
                        `;
                        doneCount++;

                    } else {
                        //选择框 文本  删除
                        todoStr += `
                        <li>
                            <input type="checkbox" index = ${i} >
                            <p id="p-${i}" index=${i}>${data.title}</p>
                            <a href="javascript:;">-</a>
                        </li>
                        `;
                        todoCount++;
                    }
                }
            )
        }

        // 无数据
        $('#todolist').html(todoStr);
        $('#donelist').html(doneStr);
        $('#todocount').html(todoCount);
        $('#donecount').html(doneCount);
    }
    //更新数据
    function update(position,key,value){
        var data = loadData();
        //返回删除后的列表的第一条数据
        var todo = data.splice(position,1)[0];
        todo[key] = value;
        data.splice(position,0,todo);
        saveData(data);
        //重新渲染解main
        load();
    }


    load();
    //输入框监听  添加数据
    $('#title').keydown(function (event) {
        if(event.keyCode === 13){
            var value = $(this).val();
            if(!value){
                alert('输入不能为空')
            }else{
                //加载本地数据
                var data = loadData();
                data.unshift({
                    title:value,
                    done:false
                    });
                $(this).val('');
                //保存数据
                saveData(data);
                //渲染数据
                load();
            }
        }
    })

    //点击删除按钮 删除数据
    $('#todolist').on('click' , 'a' ,function () {
        //加载本地数据
        var todoList = loadData();
        //点击li后拿到当前的index属性值
        //<li index ><p><a></li>
        var i = $(this).parent().index();
        //列表删除数据
        todoList.splice(i,1);
        //保存数据
        saveData(todoList);
        load();
    })

    //变更状态 正在进行
    $('#todolist').on('change','input[type=checkbox]',function () {
        var i = parseInt($(this).attr('index'));
        console.log(i)
        update(i,'done',true)
    })
    //变更状态 已完成
    $('#donelist').on('change','input[type=checkbox]',function () {
        var i = parseInt($(this).attr('index'));
        console.log(i)
        update(i,'done',false)
    })

    //编辑操作
    $('#todolist').on('click','p',function (){
        //获取index
        var i = parseInt($(this).attr('index'));
        //拿到文本
        var title = $(this).html();
        var messageP = $(this);
        messageP.html(`
        <input type="text" id="input-${i}" value=${title}>
        `)
        //选中 需要和 焦点方法同时使用
        $(`#input-${i}`)[0].setSelectionRange(0,$(`#input-${i}`).val().length);
        $(`#input-${i}`).focus();
        $(`#input-${i}`).blur(function () {
            if($(this).val().length===0){
                messageP.html(title);
                alert('内容不能为空')
            }else{
                //赋值当前输入内容 到列表对应位置
                update(i,'title',$(this).val())
            }
        })
    })



})